<template>
    <div class="kanban">
        <el-form :model="form" class="app-search" ref="searchForm">
            <el-select class="app-search-item" clearable filterable placeholder="商户" size="medium"
                       style="width:100px;" v-model="form.merchantId"
            >
                <el-option :label="item.name" :value="item.id" v-for="item in merchants"/>
            </el-select>
            <el-input class="app-search-item" clearable placeholder="请输入订单编号" size="medium"
                      style="width:220px;"
                      v-model="form.orderNo"
            />
            <el-select class="app-search-item" clearable filterable placeholder="状态" size="medium"
                       style="width:100px;" v-model="form.status"
            >
                <el-option :label="item.label" :value="item.value" v-for="item in $orderStatus"/>
            </el-select>
            <el-select class="app-search-item" clearable filterable placeholder="订单类型" size="medium"
                       style="width:100px;" v-model="form.type"
            >
                <el-option :label="item.label" :value="item.value" v-for="item in $orderType"/>
            </el-select>
            <el-select class="app-search-item" clearable filterable placeholder="支付状态" size="medium"
                       style="width:100px;" v-model="form.payStatus"
            >
                <el-option :label="item.label" :value="item.value" v-for="item in $payStatus"/>
            </el-select>
            <el-date-picker :picker-options="pickerOptions" class="app-search-item" end-placeholder="结束日期"
                            range-separator="至" size="medium" start-placeholder="开始日期" style="margin-left: 10px"
                            type="daterange" unlink-panels v-model="form.searchTime" value-format="yyyy-MM-dd"
            />
            <el-button @click="fetchData(1)" class="app-search-item" icon="el-icon-search" size="medium"
                       type="primary"
            >
                搜索
            </el-button>
        </el-form>
        <el-table :data="items" @selection-change="handleSelectionChange" style="width: 100%">
            <el-table-column type="expand" width="35">
                <template slot-scope="{ row }">
                    <el-table
                            :data="row.deliveries"
                            border
                            class="inlineTable"
                            highlight-current-row
                            style="width:95%;margin:auto;"
                    >
                        <el-table-column label="物流种类" width="100">
                            <template slot-scope="scope">{{ scope.row.type | deliveryTypeText }}</template>
                        </el-table-column>
                        <el-table-column label="物流类型" width="150">
                            <template slot-scope="scope">{{ scope.row.logisticsType | logisticsTypeText }}</template>
                        </el-table-column>
                        <el-table-column label="数量" prop="quantity" width="100"/>
                        <el-table-column label="创建时间" prop="created" width="170"/>
                        <el-table-column label="业务单号" prop="bizNo" width="285"/>
                        <el-table-column label="状态" width="80">
                            <template slot-scope="scope">{{ scope.row.status | deliveryStatusText }}</template>
                        </el-table-column>
                        <el-table-column label="交付时间" prop="confirmDate"/>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="商户名称" prop="merchantName" width="120">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.merchantName}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="类型" prop="type" width="60">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.orderType | orderTypeText}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="订单编号" prop="type" width="160">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.orderNo}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="type" width="80">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.goodsName}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="时间" prop="created" width="170">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.created}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="总数/交付/已退" prop="quantity" width="120">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b><span style="color: red">{{scope.row.quantity}}</span> </b>
                        /
                        <b>{{scope.row.deliveredQuantity}}</b>
                        /
                        <b>{{scope.row.returnedQuantity}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="总价/已退" prop="totalPrice" width="100">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b><span style="color: red">{{scope.row.totalPay | yuan}}</span></b>
                        /
                        <b>{{scope.row.returnedTotalPrice | yuan}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="押金/已退" prop="totalPrice" width="90">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b><span style="color: red">{{scope.row.deposit | yuan}}</span></b>
                        /
                        <b>{{scope.row.depositReturned | yuan}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="支付状态" prop="status" width="80">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.payStatus | payStatusText}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="提成" prop="totalPrice" width="60">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.commission | yuan}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" width="100">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.status | orderStatusText}}</b>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :page-size="form.size" :total="form.total" @current-change="fetchData"
                           layout="prev, pager, next"
                           width="1000">
            </el-pagination>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'Orders',
        info: {},
        data() {
            return {
                form: {
                    page: 1,
                    size: 10,
                    total: 0,
                    merchantId: '',
                    status: '',
                    orderNo: '',
                    type: '',
                    payStatus: '',
                    startDt: '',
                    endDt: '',
                    searchTime: '',
                },
                merchants: [],
                items: [],
                deliveryDialog: {
                    visible: false,
                    title: '物流信息',
                    items: []
                },
                multipleSelection: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end])
                        }
                    }]
                }
            }
        },
        methods: {
            getNowDay() {
                const now = new Date();
                const year = now.getFullYear();
                let month = now.getMonth();
                let date = now.getDate();
                month = month + 1;
                month = month.toString().padStart(2, '0');
                date = date.toString().padStart(2, '0');
                const defaultDate = `${year}-${month}-${date}`;
                return [defaultDate, defaultDate]
            },
            handleSelectionChange(val) { // 表格多选选中值
                this.multipleSelection = val
            },
            fetchMerchants() {
                this.$fetch('/admin/merchant/list?page=1&size=9999').then(res => {
                    if (res.code === 0) {
                        this.merchants = res.data.records
                    } else {
                        this.$message.error(res.errorMsg)
                    }
                })
            },
            fetchData(page) {
                if (page) {
                    this.form.page = page
                }
                if (this.form.searchTime && this.form.searchTime.length === 2) {
                    this.form.startDt = this.form.searchTime[0];
                    this.form.endDt = this.form.searchTime[1];
                } else {
                    this.form.startDt = '';
                    this.form.endDt = '';
                }
                let url = '/admin/orders?merchantId=${merchantId}&status=${status}&orderNo=${orderNo}&type=${type}&payStatus=${payStatus}&startDt=${startDt}&endDt=${endDt}&page=${page}';
                url = url.replace('${merchantId}', this.form.merchantId);
                url = url.replace('${status}', this.form.status);
                url = url.replace('${orderNo}', this.form.orderNo);
                url = url.replace('${type}', this.form.type);
                url = url.replace('${payStatus}', this.form.payStatus);
                url = url.replace('${startDt}', this.form.startDt);
                url = url.replace('${endDt}', this.form.endDt);
                url = url.replace('${page}', this.form.page + '');
                this.$fetch(url)
                    .then(res => {
                        if (res.code === 0) {
                            this.items = res.data.records
                            this.form.total = res.data.total
                        } else {
                            this.$message.error(res.errorMsg)
                        }
                    })
            },
            openDeliveryDialog(data) {
                this.deliveryDialog.visible = true;
                this.deliveryDialog.items = data;
                if (this.deliveryDialog.items) {
                    console.log(JSON.stringify(this.deliveryDialog.items))
                }
            }
        },
        mounted() {
            this.fetchMerchants();
            this.fetchData()
        }
    }
</script>
<style>
    .block {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-end;
        padding: 15px 30px;
    }

    .kanban {
        padding: 25px 25px;
    }

    .el-image-viewer__img {
        width: 120px;
        height: 120px;
    }

</style>
